<template>
    <div class="page">
        <div class="page-content">
            <div class="card-header van-hairline--bottom">
                {{userName}}
                <div class="right-time">
                    {{currentDay|format('YYYY-MM-DD')}}
                </div>
            </div>
            <div>
                 {{address}}
            </div>
        </div>
        <van-tabbar v-model="active">
            <van-tabbar-item icon="shop" to="/">
                <span>打卡</span>
                <template slot="icon" slot-scope="props">
                    <i class="iconfont oa-dingwei icon-size"></i>
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="shop" to="/detail">
                <span>统计</span>
                <template slot="icon" slot-scope="props">
                    <i class="iconfont oa-tongji icon-size"></i>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>

</template>

<script>
    import dayjs from 'dayjs'

    export default {
        name: "Card",
        data() {
            return {
                active: 0,
                wifi: false,
                wifiList: [],
                currentDay:new Date(),
                location: {
                    latitude: "",
                    longitude: "",

                },
                // userName: ServerParam.UserName ? ServerParam.UserName : "",
                address: "",
                geolocation: null,
                geocoder: null,
                addressComponents:null
            }
        },
        computed:{
            userName(){
                return ServerParam.UserName ? ServerParam.UserName : ""
            }
        },
        mounted() {
            this.setupLocation();
            this.getLocation();

        },
        methods: {
            setupLocation() {
                this.geolocation = new BMap.Geolocation();
                this.geolocation.enableSDKLocation();
                this.geocoder = new BMap.Geocoder();
            },

            getLocation() {
                let that = this;
                try {
                    this.geolocation.getCurrentPosition(function (r) {
                        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                            // var mk = new BMap.Marker(r.point);
                            // map.addOverlay(mk);
                            // map.panTo(r.point);
                            that.location.latitude = r.point.lat
                            that.location.longitude = r.point.lng
                            // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                            that.geocoder.getLocation(r.point,(rs)=>{
                                that.addressComponents = rs.addressComponents
                                that.address  = that.addressComponents.city + that.addressComponents.district + that.addressComponents.street
                            })
                        }
                        else {
                            console.error('failed' + this.getStatus())
                            // alert();

                        }
                    }, {enableHighAccuracy: true})
                } catch (e) {
                    console.error(e)
                }

            }
        }
    }
</script>

<style lang="less">

    .page {
        height: 100%;
        .page-content {
            height: calc(~"100% - 50px");
            -webkit-overflow-scrolling: touch;
            overflow-y: auto;
        }
        .card-header {
            padding: 0 15px;
            line-height: 50px;
            height: 50px;
            background: #fff;
            font-size: 15px;
            color: #333333;
            display: flex;
            flex-direction: row;
            align-items: center;
            .right-time {
                margin-left: auto;
                font-size: 14px;
                color: #3283fa;
            }
        }
    }
</style>